<template>
  <div>
    <!-- 首页顶部导航位置 -->
      <div>
        <van-nav-bar left-arrow @click-left="goHome()" left-text="返回">
          <!-- 导航搜索位置 -->
          <template #right>
            <van-search
              @search="search()"
              v-model="searchContent"
              shape="round"
              right-icon="flase"
              placeholder="输入商品名称"
            />
          </template>
        </van-nav-bar>
      </div>
      <Bg>
        <div class="content">
          <div class="Probox" v-for="(item, index) in ProData" :key="index">
            <HotPro :HotProData="item"> </HotPro>
          </div>
        </div>
      </Bg>
  </div>
</template>

<script>
import HotPro from "../components/HotPro";
import Bg from "../components/Bg";
export default {
  name: "Search",
  components: {
    Bg,
    HotPro,
  },
  data() {
    return {
      searchContent: "",
      ProData: [],
    };
  },
  methods: {
    // 调用搜索接口
    search() {
      if (this.searchContent.length === 0) {
        this.ProData = [];
        return;
      }
      this.axios({
        method: "get",
        url: "/search",
        params: {
          name: this.searchContent,
        },
      })
        .then((res) => {
          
          if (res.data.code === "Q001") {
            this.ProData = res.data.result;
          }
          
        })
        .catch((err) => {
          
        });
    },
    // 回到首页
    goHome() {
      // this.$router.push({name:"Home"})
      this.$router.go(-1);
    },

  },
};
</script>

<style lang="less" scoped>
// 修改组件搜索框的样式
.van-search {
  padding: 0;
}
// 给搜索框一个宽度  不然会抖动
/deep/.van-search__content {
  width: 220px;
}

.content {
  width: 95%;
  margin: 0 auto;
  //   background-color: chocolate;
  overflow-y: auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  .Probox {
    flex: 0 1 50%;
    // height: 150px;
    // background-color: cornsilk;
    // margin-bottom: 10px;
  }
}
</style>